<template>
	<div class="classNotice">
		<div class="classIndex_h">
			<span>班级通知</span>
		</div>
		<!--  -->
		<div class="classNotice_search">
			<el-input
			class="classNotice_sc"
			  placeholder="搜索通知"
			  prefix-icon="el-icon-search"
			  @change="changeSelectsd()"
			  v-model.trim="keyword">
			</el-input>

			<router-link  v-if='roleBaseid(6)' :to="{path: '/class/notice/add', query: {id: path} }">发送通知</router-link>
		</div>
		<ul  v-loading="loading">
			<li class="classNotice_ls" v-for="(item, index) in classNotice" :key="index">
				<div class="classNotice_ls1 clear">
					<p>{{item.title}}</p>
					<span>{{item.create_time}}</span>
				</div>
				<!--  -->
				<div class="classNotice_ls2 clear">
					<div v-html="item.content"></div>
					<span class="classNotice-del" @click="deleteNC(item.id)" v-if="$g.user_id == item.create_id">删除</span>
					<span @click="detailsNC(item)">查看通知</span>
				</div>
				<!--  -->
				<div class="classNotice_ls3">
					<span>
						<span>
							<img v-if="item.avatar_path != ''" :src="BASE_URL + item.avatar_path">
							<img v-else src="../../../public/images/Group9.png">
						</span>
						<i>{{ item.username}}</i>
					</span>

					<span @click="nPeople(item.have_see_user, item.not_see_user)">
						<img src="../../assets/images/see.png" class="see_icon">
						{{item.have_see_user_count}}人查看
					</span>
				</div>
			</li>
		</ul>

		<div class="pageBox" v-show="total_number > page_size">
			<el-pagination
				@current-change="change_page"
				:page-size="page_size"
				:current-page="page_index"
				layout="prev, pager, next"
				:total="total_number">
			</el-pagination>
		</div>

		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>还没发现任何相关的内容哦~</p>
		</div>


		<!-- 查看人数 -->
		<el-dialog
			title="通知"
			:visible.sync="numberPeople"
			width="800px"
			custom-class="alBox"
			:close-on-click-modal="false">
			<div class="people nbPeople">
				<el-scrollbar>
					<div class="people_y">
						<div class="people_yh">
							<span>已查看</span>
						</div>
						<ul class="people_ym clear">
							<li v-for="item in have_see_user" :key="item.id">
								<div>
									<img v-if="item.avatar_path != '' " :src="BASE_URL + item.avatar_path">
									<img v-else src="../../../public/images/Group9.png">
								</div>
								<p :title="item.name">{{item.name}}</p>
							</li>
						</ul>
						<div class="dependent2" v-if="have_see_user.length === 0">
							<i class="ipm image_nofound"></i>
							<p>还没发现任何人查看哦~</p>
						</div>
					</div>
					<div class="people_hr"></div>
					<div class="people_n">
						<div class="people_yh">
							<span>未查看</span>
						</div>
						<ul class="people_ym clear">
							<li v-for="item in not_see_user" :key="item.id">
								<div>
									<img v-if="item.avatar_path != '' " :src="BASE_URL + item.avatar_path">
									<img v-else src="../../../public/images/Group9.png">
								</div>
								<p :title="item.name">{{item.name}}</p>
							</li>
						</ul>
						<div class="dependent2" v-if="not_see_user.length === 0">
							<i class="ipm image_nofound"></i>
							<p>所有都人看过啦~</p>
						</div>
					</div>
				</el-scrollbar>
			</div>
		</el-dialog>

		<!-- 通知详情 -->
		<el-dialog
			title="通知详情"
			:visible.sync="detailsNotice"
			width="800px"
			custom-class="alBox"
			:close-on-click-modal="false">
			<div class="detailsNT">
				<el-scrollbar>
					<h2>{{noticeInfo.title}}</h2>
					<p>{{noticeInfo.name}} {{noticeInfo.create_time}} 发布</p>
					<div  class="detailsNT_cx" v-html="noticeInfo.content"></div>
					<template  v-if="noticeInfo.file_type">
						<div class="detailsNT_img" v-if="noticeInfo.file_type == 3">
							<img :src="BASE_URL + noticeInfo.attach" v-if="noticeInfo.attach">
						</div>
						<template v-else>
							<div class="detailsNT_wx clear" v-if="noticeInfo.attach">
								<div>
									<span>
										<img :src="`${BASE_URL}/images/format/resourceicon${noticeInfo.file_type}.png`">
									</span>
									<strong >{{noticeInfo.attach_name}}</strong>
								</div>
								<a :href="`${BASE_URL}/index/resource/download_video_file?name=${noticeInfo.attach_name}&path=${noticeInfo.attach}`" >下载</a>
							</div>
						</template>
						
					</template>
				</el-scrollbar>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	
	export default{
		name: '',
		data(){
			return {
				classNotice: [],/*数据列表*/
				total_number: 0,/*分页总数*/
				page_index: 1,
				page_size: this.$g.page_size,
				keyword: '',/*关键字*/
				numberPeople: false, //查看人数
				detailsNotice: false, //通知详情
				path: this.$route.query.id,
				noticeInfo: '',/*查看通知的{}数据*/

				have_see_user: [],/*已查看人数*/
				not_see_user: [],/*未查看人数*/

				placeholder: false,
				loading: false,
				headmaster: '',
				role: this.$store.getters.userInfo.role,
			}
		},
		created() {},
		watch: {
			/*监控班级切换*/
			'$store.state.changData': {
				handler(val, newval){
					this.path = sessionStorage.getItem('classId')
					this.getClassNotice()
				},
				immediate: true
			}
		},
		computed: {
			changData() {
				return deep_clone(this.$store.state.changData);
			},
		},
		methods: {

			//列表
			getClassNotice(){
				if( is_empty( this.path) ) {
					return  this.placeholder = true
				}
				
				this.loading = true;
				let success = (res=>{
					let data = res.data;
					this.classNotice = data.data;
					this.total_number = data.data_sum;
					this.loading = false
					this.placeholder =  this.classNotice.length === 0 ? true : false
				});
	
				this.$ajax({
					url:'api/org/class_something',
					method: 'get',
					params: {
						style: 4,
						classid: this.path,
						user_id: this.$g.user_id,
						role_id: this.role,
						page: this.page_index,
						size: this.page_size,
						keyword: this.keyword,
						data_type: 2
					},
					func: {success: success}
				})
			},
			//查看人数
			nPeople(val, val2){
				this.numberPeople = true;
				this.have_see_user = val;
				this.not_see_user = val2
			},
			//查看通知
			detailsNC(item){
				this.noticeInfo = item
				this.detailsNotice = true;

				let success = (res=>{
					this.getClassNotice()
				})
				this.$ajax({
					url: '/api/message/class_message_record',
					method: 'post',
					data: {id: item.id},
					func: {success: success}
				})
			},
			deleteNC(id){


				this.$confirm('是否删除该通知?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					customClass: 'confirm-them'
				}).then(() => {

					let success = (res=>{
						this.$message.success(res.msg)
						this.page_index = 1
						this.getClassNotice()
					})
					this.$ajax({
						url: '/api/message/message',
						method: 'delete',
						params: {id: id},
						func: {success: success}
					})

			
				}).catch(() => {});
			},
			changeSelectsd(){
				this.page_index = 1;
				this.getClassNotice()
			},
			change_page(val){
				this.page_index = val;
				this.getClassNotice()
			}

		}
	}
</script>